<template>
  <van-popup
    :value="value"
    @input="$emit('input', $event)"
    @open="isReport = false"
  >
    <!-- 反馈 -->
    <van-cell-group v-if="!isReport">
      <van-cell @click="dislikeArticle" icon="closed-eye">不感兴趣</van-cell>
      <van-cell is-link @click="isReport = true">反馈垃圾内容</van-cell>
      <van-cell icon="info-o">拉黑作者</van-cell>
    </van-cell-group>
    <!-- 举报 -->
    <van-cell-group v-else>
      <van-cell icon="arrow-left" @click="isReport = false">返回</van-cell>
      <van-cell
        @click="reportArticle(rp.value)"
        v-for="rp in reports"
        :key="rp.value"
        >{{ rp.label }}</van-cell
      >
    </van-cell-group>
  </van-popup>
</template>

<script>
import { disLikeById, reportById } from '@/api/article'
// 导入举报类型数据
import { reports } from '@/utils/conts'
export default {
  props: {
    // 控制浮层显示
    value: {
      type: Boolean,
      default: false
    },
    // 当前操作文章ID
    articleId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      // 是否显示上报垃圾内容
      isReport: false,
      // 举报类型数据
      reports
    }
  },
  methods: {
    // 举报文章
    async reportArticle (type) {
      try {
        await reportById(this.articleId, type)
        this.$emit('on-delArt')
        this.$toast.success('操作成功！')
        // 关闭弹出层
        this.$emit('input', false)
      } catch (error) {
        this.$toast.fail('操作失败！')
      }
    },
    async dislikeArticle () {
      /**
       * 1. 调用接口=》传入当前文章ID=》对文章不感兴趣（服务器）
       *    * 文章ID从哪来？=》文章列表父组件传递
       * 2. 把不感兴趣文章从列表删除（前端）
       */
      try {
        await disLikeById(this.articleId)
        // 删除父组件当前ID的文章数据
        /**
         * 子传父通信=》$emit自定义事件
         * 1. 父组件定义自定义事件
         * 2. 子组件触发自定义事件=》删除
         */
        this.$emit('on-delArt')
        this.$toast.success('操作成功！')
        // 关闭弹出层
        this.$emit('input', false)
      } catch (error) {
        this.$toast.fail('操作失败！')
      }
    }
  }
}
</script>

<style scoped lang='less'>
.van-popup {
  width: 80%;
  border-radius: 4px;
}
</style>
